<template>
	<div class="container">
		<div class="wrapper">
			<div class="head">
				<span>员工搜索</span>
			</div>
			<div class="from">
				<el-form ref="form" :model="form" label-width="150px" class="demo-dynamic">
					<el-form-item label="员工编号" prop="number">
						<el-col :span="16">
							<el-input v-model="form.number" placeholder="请输入员工编号" size="small"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="姓名" prop="name">
						<el-col :span="16">
							<el-input v-model="form.name" placeholder="请输入姓名" size="small"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="性别" prop="sex">
						<el-checkbox-group v-model="form.sex">
							<el-checkbox label="男"></el-checkbox>
							<el-checkbox label="女"></el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="职务" prop="post">
						<el-select v-model="form.post" placeholder="请选择" size="small" clearable filterable>
							<el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit('form')">提交</el-button>
						<el-button @click="resetForm('form')">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					number: '',
					name: '',
					sex: [],
					post: '',
				},
				staffList: []
			}
		},

		created() {
			Lockr.rm('staffSearch')
			this.getStaffTypeList()
		},

		methods: {
			getStaffTypeList() {
				this.apiPost('System/staffTypeLists').then(res => {
					this.staffList = res
				})
			},
			onSubmit(formName) {
				Lockr.set('staffSearch', this.form)
				router.push('/operate/manpower/list');
			},

			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	}
</script>

<style>
	.container {
		box-sizing: border-box;
		width: 100%;
		min-height: 100%;
		background: #FFFFFF;
	}
	
	.wrapper {
		margin: 0 auto;
		padding-top: 20px;
		padding-bottom: 10px;
		width: 600px;
	}
	
	.wrapper .head {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 36px;
		background: rgba(1, 119, 191, 0.6);
	}
	
	.wrapper .head span {
		font-size: 14px;
		font-family: MicrosoftYaHei;
		color: rgba(255, 255, 255, 1);
	}
	
	.wrapper .from {
		padding: 10px;
		border: 1px solid rgba(1, 119, 191, 0.6);
	}
</style>